<script>
export default {
  name: "NewmyTable",
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    tableHeaders: {
      type: Array,
      default: () => []
    },
    colums: {
      type: Array,
      default: () => []
    },
    useDrag: {
      // 是否启用拖动排序
      type: Boolean,
      default: false
    },
    rowKey: {
      type: String,
      default: ""
    },
    spanMethod: {
      type: Function,
      default: null
    },
    rowClassName: {
      type: Function,
      default: null
    }
  },
  emits: ["selection-change"],
  setup(props,{emit}) {
    const handleSelectionChange = (selection) => {
      emit("selection-change", selection)
    }
    return {
      handleSelectionChange
    }
  },
  computed: {
    hasSelectionColumn() {
      const hasSelectionColumn = this.tableHeaders.some(header => header.type === "selection")
      return hasSelectionColumn
    },
    hasIndexColumn() {
      const hasIndexColumn = this.tableHeaders.some(header => header.type === "index")
      return hasIndexColumn
    }
  }
}
</script>

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column v-if="hasSelectionColumn" type="selection"  width="55"  align="center" />
      <el-table-column v-if="hasIndexColumn" type="index" label="序号" width="120"  align="center"/>
      <el-table-column
        v-for="header in tableHeaders.filter(header => header.type !== 'selection' && header.type !== 'index')"
        :key="header.prop"
        :prop="header.prop"
        :label="header.label"
        :align="header.align"
        :minWidth="header.minWidth">
      </el-table-column>
    </el-table>
  </div>
</template>

<style>
</style>
